<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象写轮播图</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #container{
        border: 2px solid #ddd;
        border-radius: 10px;
        width: 1380px;
        height: 350px;
        margin: 50px auto;
        position: relative;
        /* overflow: hidden; */
    }
    #prev_btn,#next_btn{
        width: 60px;
        height: 60px;
        background: rgba(39, 39, 39, .7);
        display: inline-block;
        border-radius: 50%;
        line-height: 60px;
        text-align: center;
        font-size: 30px;
        color: #fff;
        position: absolute;
        top: 143px;
        left: 15px;
        z-index: 999;
        cursor: pointer;
    }
    #next_btn{
        position: absolute;
        top: 143px;
        left: 1315px;
    }
    #prev_btn {
        margin: 7px 5px 0 0;
        width: 65px;
        height: 65px;
        font-size: 55px;
        font-weight: 800;
    }
    #next_btn {
        margin: 7px 0 0 -10px;
        width: 65px;
        height: 65px;
        font-size: 55px;
        font-weight: 800;
    }
    /* #banner_container{
        width: 600%;
    } */
    #banner_container{
        position: absolute;
        /* transition: all .5s; */
        width: 8280px;
    }
    #banner_container li{
        list-style: none;
        float: left;
        width: 1380px;
        height: 350px;
    }
    #banner_container li img{
        width: 1380px;
        height: 350px;
    }
</style>
<body>
    <div id="container">
        <a id="prev_btn">&#60</a>
        <a id="next_btn">&#62</a>
        <ul id="banner_container">
            <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/0138ec5ca44892a801208f8be4c0ea.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01b73c5ca2ca82a801214168fa83fa.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01037e5ca2ca93a801208f8b8d457d.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01da355ca419dfa8012141682afdd2.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
        </ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        // 1. 通过点击按钮控制 index 改变;
        // 2. 根据index改变去计算 banner_container 元素的left值;
        function Banner(){
            // 获取文档中的元素
            this.index=0;
            // this.autoPlay();
            // 显示当前的图片索引
            this.banner_container=document.querySelector("#banner_container");
            // 总的dom对象
            this.slides=document.querySelectorAll("#banner_container li");
            this.prev_btn = document.querySelector("#prev_btn");
            this.next_btn = document.querySelector("#next_btn");
            this.container = document.querySelector("#container");
            this.bindEvent();
            this.autoPlay();
        }
        Banner.prototype.bindEvent = function(){
            // 绑定事件
            var self = this;
            var max_index=self.slides.length-1;
            self.prev_btn.onclick = function(){
                // 设置点击事件
                if(self.index === 0){
                    self.banner_container.style.left = -max_index*1380+"px";
                    self.index=max_index-1;
                }else{
                    self.index --;
                    // 下标
                }
                self.changeSlide();
                // 切换图片
            }
            self.next_btn.onclick = function(){
                // 绑定点击事件
                if(self.index === max_index){
                    self.banner_container.style.left = 0;
                    self.index = 1;
                }else{
                    self.index ++;
                    // 下标
                }
                self.changeSlide();
            }
        }
        // 图片自动切换
        Banner.prototype.changeSlide = function(){
            // 切换图片
            // this.slide_container.style.left = -this.index * 1380 + "px"

            $(this.banner_container)
            .stop()
            .animate({
                left : -this.index * 1380
            },1000)
        }
        
        Banner.prototype.autoPlay=function(){
            var self=this;
            var t=setInterval(function(){
                self.next_btn.onclick();
            },1000)
                 // 鼠标移入的时候图片暂停自动播放
            this.container.onmouseover=function(){
                clearInterval(t);
            }
            this.container.onmouseout=function(){
                clearInterval(t);
                t=setInterval(function(){
                    self.next_btn.onclick();
                },1000)
            }

        }
        
      var bann= new Banner();

    </script>
</body>
</html>